<template>
  <div>
    <div class="app-container">
      <div style="padding: 20px">
        <vue-element-loading
          :active="this.$store.state.elementloading.vueElementLoading"
          spinner="spinner"
          color="#FF6700"
        />
        <div class="ui stackable grid">
          <!-- 药材内容 -->
          <div class="five wide column">
            <div class="ui fluid card">
              <div class="image">
                <img :src="`https://image.zysuyuan.cn:8031/${this.path}`" />
              </div>
              <div class="content">
                <a class="header">{{ this.onelist[0].mName }}</a>
                <div class="meta">
                  <span class="category">{{ this.onelist[0].mLatinName }}</span>
                </div>
                <div class="description">
                  <div>
                    <div class="row">
                      <span class="label">药材名称：</span>
                      {{ this.onelist[0].mName }}
                    </div>
                    <div class="row describe">
                      <span class="label">药材拉丁名称：</span>
                      {{ this.onelist[0].mLatinName }}
                    </div>
                    <div class="row describe">
                      <span class="label">基源名称：</span>
                      {{ this.onelist[0].mOriginName }}
                    </div>
                    <div class="row describe">
                      <span class="label">基源简介：</span>
                      {{ this.onelist[0].mOriginInterview }}
                    </div>
                    <div class="row describe">
                      <span class="label">药材简介：</span>
                      {{ this.onelist[0].mRemarks }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="eleven wide column">
            <!-- <view-message style=""></view-message> -->
            <div
              class="ui segment"
              style="padding-left: 0 !important; padding-right: 0 !important"
            >
              <div class="warning-box">
                <p class="box-title" @dblclick="ifshowMore = true">
                  <i class="el-icon-success" style="color: #67c23a"></i>
                  <span>所属产地</span>
                </p>
                <div id="table-today">
                  <el-table
                    size="mini"
                    :data="list"
                    max-height="450"
                    border
                    style="width: 100%"
                    highlight-current-row
                    @current-change="handleSelectionChange"
                    @row-click="chooseone"
                  >
                    <el-table-column fixed width="55">
                      <template slot-scope="scope">
                        <el-radio v-model="radio" :label="scope.row.id">
                          <span class="el-radio__label"></span>
                        </el-radio>
                      </template>
                    </el-table-column>
                    <!-- type="index"获取索引值，labal显示标题，prop 数据字段名 -->
                    <el-table-column
                      fixed
                      prop="bName"
                      label="基地名称"
                      width="120px"
                    ></el-table-column>
                    <el-table-column
                      prop="bArea"
                      label="基地面积"
                    ></el-table-column>
                    <el-table-column
                      prop="bPosition"
                      label="位置信息"
                    ></el-table-column>
                    <el-table-column prop="environment" label="生态环境">
                      <template slot-scope="scope">
                        <el-button
                          @click="openenvironment(scope.row)"
                          size="mini"
                          type="primary"
                          >查看</el-button
                        >
                      </template>
                    </el-table-column>
                    <el-table-column prop="areaPhoto" label="基地照片">
                      <template slot-scope="scope">
                        <el-button
                          @click="openbasephoto(scope.row)"
                          size="mini"
                          type="danger"
                          >查看</el-button
                        >
                      </template>
                    </el-table-column>
                    <el-table-column prop="company" label="所属公司">
                      <template slot-scope="scope">
                        <el-button
                          @click="openCompany(scope.row)"
                          size="mini"
                          type="primary"
                          >查看</el-button
                        >
                      </template>
                    </el-table-column>
                    <el-table-column prop="gpsPosition" label="Gps位置">
                      <template slot-scope="scope">
                        <el-button
                          size="mini"
                          @click="showgps(scope.row)"
                          type="primary"
                          >查看</el-button
                        >
                      </template>
                    </el-table-column>
                    <el-table-column
                      prop="tCultivatedArea"
                      label="栽培面积（亩）"
                      width="120px"
                    ></el-table-column>
                    <el-table-column
                      prop="tReportableArea"
                      label="可采收面积（亩）"
                      width="140px"
                    ></el-table-column>
                    <el-table-column
                      prop="tYield"
                      label="总产量（kg/年）"
                      width="130px"
                    ></el-table-column>
                    <el-table-column
                      prop="medicineValue"
                      fixed="right"
                      label="药材质量"
                    >
                      <template slot-scope="scope">
                        <el-button
                          @click="openmedicineValue(scope.row)"
                          size="mini"
                          type="danger"
                          >查看</el-button
                        >
                      </template>
                    </el-table-column>
                    <el-table-column prop="materialDirect" label="原料去向">
                      <template slot-scope="scope">
                        <el-button
                          @click="toMedicinalGone(scope.row)"
                          size="mini"
                          type="primary"
                          >查看</el-button
                        >
                      </template>
                    </el-table-column>
                    <el-table-column
                      prop="tPrice"
                      label="价格/流通"
                      width="110px"
                    ></el-table-column>
                    <el-table-column
                      prop="tBreedMode"
                      label="种繁模式"
                    ></el-table-column>
                    <el-table-column
                      prop="tEnvironment"
                      label="种植环境"
                    ></el-table-column>
                    <el-table-column
                      prop="tFertilizeMethod"
                      label="施肥方法"
                    ></el-table-column>
                    <el-table-column
                      prop="tPestsPrecaution"
                      label="病虫害防法"
                      width="110px"
                    ></el-table-column>
                    <el-table-column
                      prop="tCollecteTime"
                      label="采收时间"
                    ></el-table-column>
                    <el-table-column
                      prop="tCollecteMethod"
                      label="采收方法"
                    ></el-table-column>
                    <el-table-column
                      prop="tPart"
                      label="药用部位"
                    ></el-table-column>
                    <el-table-column
                      prop="tTotally"
                      label="净制"
                    ></el-table-column>
                    <el-table-column
                      prop="tProcess"
                      label="产地加工方法"
                      width="130px"
                    ></el-table-column>
                    <el-table-column
                      prop="tProportion"
                      label="干/鲜比"
                    ></el-table-column>
                    <el-table-column
                      prop="tScale"
                      label="分级与包装"
                      width="130px"
                    ></el-table-column>
                    <el-table-column
                      prop="tSampleNum"
                      label="取样量及编号"
                      width="130px"
                    ></el-table-column>
                    <el-table-column
                      prop="tPlantNum"
                      label="植物标本编号"
                      width="130px"
                    ></el-table-column>
                    <!-- <el-table-column
                      v-if="btnshow('productionarea-handle')"
                      fixed="right"
                      label="操作"
                      width="150"
                    >
                      <template slot-scope="scope">
                        <el-button size="mini" @click="handleEdit(radio)">编辑</el-button>
                        <el-button
                          size="mini"
                          type="danger"
                          @click="deleteMedicinalProductBase(scope.row.id)"
                        >删除</el-button>
                      </template>
                    </el-table-column> -->
                  </el-table>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 生态环境弹窗 -->
        <el-dialog
          v-dialogDrag
          style="font-family: '微软雅黑'"
          title="环境详情"
          :visible.sync="dialogEnviroForm"
        >
          <environment-form :enviroformData="enviroform"></environment-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="dialogEnviroForm = false"
              >关 闭</el-button
            >
          </div>
        </el-dialog>

        <!-- 基地照片弹窗 -->
        <el-dialog
          v-dialogDrag
          title="基地照片"
          :before-close="imgsDialogClose"
          :visible.sync="dialogbaseArea"
          width="700px"
          :lock-scroll="true"
        >
          <template>
            <!--<el-carousel :interval="4000" type="card" height="500px">
          <el-carousel-item v-for="item in 15" :key="item">
            <el-image
              style="width: 500px;height: 400px"
              :src="`image/baseAreaPhoto/${item}.jpg`"
              :fit="fit"
            ></el-image>
          </el-carousel-item>
          </el-carousel>-->
            <el-row :guntter="0">
              <vue-element-loading
                :active="this.$store.state.elementloading.imgLoading"
                spinner="spinner"
                color="#FF6700"
              />
              <el-col
                :span="6"
                class="block"
                v-for="(img, index) in imgs"
                :key="index"
              >
                <el-image
                  style="width: 180px; height: 200px"
                  :src="BASEURL + img.tImgId"
                  :fit="fit"
                ></el-image>
              </el-col>
            </el-row>
          </template>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="closeImgs">关 闭</el-button>
          </div>
          <!-- <span slot="footer" class="dialog-footer"></span> -->
        </el-dialog>

        <!-- 所属公司弹窗 -->
        <el-dialog
          v-dialogDrag
          :lock-scroll="true"
          title="环境详情"
          :visible.sync="dialogCompanyForm"
        >
          <company-form :companyformData="companyform"></company-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="dialogCompanyForm = false"
              >关 闭</el-button
            >
          </div>
        </el-dialog>

        <!-- gps弹窗 -->
        <el-dialog
          v-dialogDrag
          width="500px"
          title="Gps位置"
          :visible.sync="dialogFormGps"
        >
          <template>
            <baidu-map
              class="bm-view"
              :center="center"
              :zoom="zoom"
              :scroll-wheel-zoom="true"
              ak="IGv3m1D92jWLXobdMPUyfY5hCD5j34Oz"
              ref="myMap"
              @ready="mapReady"
              @click="getClickInfo"
              @row-click="chooseone"
            >
              <bm-scale></bm-scale>
            </baidu-map>
          </template>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="dialogFormGps = false"
              >关 闭</el-button
            >
            <!-- <el-button type="primary" @click="addData('pojoForm')">确 定</el-button> -->
          </div>
        </el-dialog>

        <!-- 药材质量弹窗 -->
        <el-dialog
          v-dialogDrag
          style="font-family: '微软雅黑'"
          title="药材质量"
          :visible.sync="dialogmedicineValue"
        >
          <mdvalue-form :mdvalueformData="mdValueform"></mdvalue-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="dialogmedicineValue = false"
              >关 闭</el-button
            >
          </div>
        </el-dialog>
        <!-- <el-card shadow="never">
          <el-row v-if="onelist">
            <el-col class="des-all" :lg="14" :push="2">
              <div class="describe" prop="hhh">
                <span>药材名称：</span>
                {{this.onelist[0].mName}}
              </div>
              <div class="distance">
                <span>药材拉丁名称：</span>
                {{this.onelist[0].mLatinName}}
              </div>
              <div class="distance">
                <span>基源名称：</span>
                {{this.onelist[0].mOriginName}}
              </div>
              <div class="distance">
                <span>基源拉丁名称：</span>
                {{this.onelist[0].mOriginLatinName}}
              </div>
              <div class="distance">
                <span>基源简介：</span>
                {{this.onelist[0].mOriginInterview}}
              </div>
              <div class="distance">
                <span>药材简介：</span>
                {{this.onelist[0].mRemarks}}
              </div>
              <div class="distance">
                <el-button
                  size="small"
                  @click="showprice(onelist[0].mPriceLink)"
                  type="primary"
                >查看价格</el-button>
              </div>
            </el-col>
        <el-col :lg="6" :push="2">-->
        <!-- :span="6" :push="8" -->
        <!-- src=与"之间不能有空格，否则${name}不生效 -->
        <!-- :src="`image/medicine/${name}.jpg`" -->
        <!-- :src="`http://image.zysuyuan.cn:8031/${this.$store.state.imgpath.imgpaths[this.$route.query.index]}`" -->
        <!-- <el-image
          :src="`http://image.zysuyuan.cn:8031/${this.path}`"
          style="width: 400px; height: 400px"
          :fit="fit"
          alt="药材"
        ></el-image>-->
        <!-- <el-card shadow="always" class="box-card" :body-style="{ padding: '0px'}">
                <el-image
                  style="width: 340px; height: 230px"
                  :src="`https://image.zysuyuan.cn:8031/${this.path}`"
                  :fit="fit"
                ></el-image>
                <div class="describe_name">
                  <span>{{this.onelist[0].mName}}</span>
                </div>
              </el-card>
            </el-col>
            <el-col :span="10" :offset="2">
            </el-col>
          </el-row>
        </el-card>-->
      </div>
      <!-- <el-row>
        <el-col>
          <div>
            <view-message></view-message>
          </div>
        </el-col>
      </el-row>-->
    </div>
  </div>
</template>

<style scoped src="semantic-ui-css/semantic.min.css"></style>
<script src="./viewmessage.js" ></script>

<style src="./viewmessage.css" scoped></style>

